<template>
	<view class="contianer">
		<navbar-module :title="$t('discover.Jobs')" @showBubbleBox="releaseJos" :type="1" v-if="!navShow"
			@handleSearch="handleSearch" />
		<view class="search-line" v-else>
			<view class="u-nav-slot" @click="handleShowSidebar">
				<view class="iconfont icon-31liebiao icon-color"></view>
			</view>
			<view class="search-block">
				<view class="iconfont icon-sousuo search-icon"></view>
				<input :focus="inputFocus" v-model="listForm.position" :placeholder="$t('index.search')"
					placeholder-style="color: #878787;" class="search-input" @confirm="getMainList" @blur="blurInput" />
			</view>
			<view class="iconfont icon-bianji icon-color icon-margin" @click.stop="releaseJos"></view>
		</view>
		<!-- tab栏 -->
		<TopPopup :show.sync="tagsShow" :labelList="labelList" @change="changeTabs"></TopPopup>

		<u-tabs :current="currentIndex" style="margin-top: 30upx;" @change="changeTabs" :list="labelList"
			keyName="showLabel" lineWidth="0" :inactiveStyle="{
        background: '#FFFFFF',
        'border-radius': '10rpx',
        padding: '12rpx 20rpx',
        'font-size': '28rpx',
      }" :activeStyle="{
        background: '#61BDB2',
        'border-radius': '10rpx',
        color: '#FFFFFF',
        padding: '12rpx 20rpx',
        'font-size': '28rpx',
      }" :itemStyle="{
        padding: 0,
        'margin-right': '20rpx',
      }">
			<view slot="right" style="padding-left: 10rpx" @tap="onMoreTag">
				<view class="iconfont icon-31liebiao biao"></view>
			</view>
		</u-tabs>
		<view style="height: 22rpx;"></view>

		<!-- 		<view class="" v-if="loading">
			<view style="margin-bottom: 22rpx;" v-for="item in 8" :key="item">
				<u-skeleton rows="3" :title="false">
				</u-skeleton>
			</view>
		</view> -->

		<view class="recent-module" v-if="recruitList.length > 0">
			<view class="item-list" v-for="item in recruitList" :key="item.id" @click="toDetailHandle(item)">
				<view class="item-list__header">
					<text class="job-name omit_1">{{ item.position }}</text>
					<text class="sub-job-name"> {{ formatPlace(item.workPlace) }}</text>
				</view>

				<view class="item-list__center">
					<view class="job-detail">
						<view class="" v-if="item.salary === null">
							<text class="light-text">{{ $t("recruit.from") }}</text>
							<text class="deep-text">
								{{ getCoinName(item.currencyId) }}{{ parseFloat(item.salaryMoney) }}
							</text>
						</view>
						<view class="" v-else>
							<text class="deep-text">{{ $t("recruit.Negotiable") }}</text>
						</view>
						<view class="job-tags">
							<view class="job-tags__item">
								{{ jobNatureStr(item.jobNature) }}
							</view>
							<view class="job-tags__item">
								{{ workingModeStr(item.workingMode) }}
							</view>
							<view class="job-tags__item">
								{{ workExperienceStr(item.workExperience) }}
							</view>

						</view>

					</view>
					<view class="job-btn">
						{{ $t("feeServices.apply") }}
					</view>

				</view>

				<view class="item-list__bottom">
					<view class="job-info">
						<view class="job-name  omit_3">
							{{ item.companyName }}
						</view>
						<view class="job-time">
							{{ buildI18nTime(item.createTime) }}
						</view>
					</view>
					<view class="job-tips" v-if="item.allowReferrals !== 0">
						<i class="iconfont icon-tuijian job-icon"></i>
						{{ $t("recruit.allowReferrals") }}
					</view>

				</view>

			</view>
		</view>

		<u-empty v-else :text="$t('EmptyData')" textColor="#878787" textSize="14" width="104" height="100" marginTop="80"
			icon="/static/image/bourse/none_order.png"></u-empty>

		<SidebarModule :show="showSidebar" @closeSidebar="handleCloseSidebar" />
	</view>
</template>

<script>
	import NavbarModule from "@/components/NavbarModule.vue";
	import TabBarModule from "@/components/TabBarModule.vue";
	import BubbleBox from "@/components/BubbleBox.vue";
	import TopPopup from "@/components/TopPopup.vue";
	import SidebarModule from '../../components/SidebarModule.vue';

	import {
		queryLabelList,
		recruitmentList
	} from '@/services/recruit.js'

	import {
		getCurrencyList
	} from '@/services/bourse.js'

	import {
		buildI18nTime
	} from "@/utils/date-util.js";

	import {
		formatPlace
	} from './index.js'
	import {
		mapState
	} from "vuex";
	export default {
		computed: {
			...mapState(["token"]),
		},
		components: {
			NavbarModule,
			TabBarModule,
			BubbleBox,
			TopPopup,
			SidebarModule
		},
		data() {
			return {
				loading: false,
				currentIndex: 0,
				labelList: [],
				tagsShow: false,
				listForm: {
					pageSize: 10,
					pageNum: 1,
					isAsc: 'asc',
					position: null,
					labelId: null,
					status: 1,
					position: ''
				},
				allLabelItem: {
					id: null,
					label: "{\"cn\":\"全部\",\"en\":\"All \",\"ru\":\"все\"}"
				},
				recruitList: [],
				// 货币列表，用于判断当前的薪资币种
				currencyList: [],
				language: "",
				total: '',
				navShow: false,
				showSidebar: false,
				inputFocus: true
			};
		},
		onLoad() {
			this.language = uni.getLocale();
			this.getCurrency()
			this._queryLabelList()
			this._getRecruitmentList()
		},
		onPullDownRefresh() {
			this.listForm.pageNum = 1
			this._getRecruitmentList('Refresh')
		},
		onReachBottom() {
			if (this.total > this.listForm.pageNum * this.listForm.pageSize) {
				this.listForm.pageNum++;
				this._getRecruitmentList();
			}
		},
		methods: {
			buildI18nTime,
			formatPlace,
			blurInput() {
				if (this.listForm.position === '') {
					this.navShow = false
				}
			},
			handleSearch() {
				this.navShow = true
			},
			// 侧边栏
			handleShowSidebar() {
				this.showSidebar = true;
			},
			handleCloseSidebar() {
				this.showSidebar = false;
			},
			jobNatureStr(value) {
				var str = ''
				if (value === '0') {
					str = this.$t('recruit.Fulltime')
				} else if (value === '1') {
					str = this.$t('recruit.Part-time')
				}
				console.log(str)
				return str
			},
			workingModeStr(value) {
				var str = ''
				if (value === '0') {
					str = this.$t('recruit.OnSite')
				} else if (value === '1') {
					str = this.$t('recruit.OnLine')
				}
				return str
			},
			workExperienceStr(value) {
				var str = ''
				if (value === '0') {
					str = this.$t('recruit.Lessthan1year')
				} else if (value === '1') {
					str = this.$t('recruit.1-3Years')
				} else if (value === '2') {
					str = this.$t('recruit.3-5Years')
				} else if (value === '3') {
					str = this.$t('recruit.moreThan5Years')
				}
				return str
			},
			// 返回上一页
			back() {
				uni.navigateBack();
			},
			onMoreTag() {
				this.tagsShow = true
				console.log('点击表情');
			},
			toDetailHandle(item) {
				uni.navigateTo({
					url: `/pagesDiscover/recruitment/RecruitmentDetail?id=${item.id}`,
				});
			},
			// 发布招聘信息
			releaseJos() {
				if (this.token) {
					uni.navigateTo({
						url: "/pagesDiscover/recruitment/RecruitmentRelease",
					});
				} else {
					uni.navigateTo({
						url: "/pages/login/Login",
					});
				}
			},
			/**
			 * 获取系统货币
			 */
			async getCurrency() {
				const {
					success,
					result
				} = await getCurrencyList()
				if (success) {
					this.currencyList = result.data
				}
			},

			/**
			 * @param {Number} currencyId 根据货币Id 获取货币的符号
			 */
			getCoinName(currencyId) {
				const coinIndex = this.currencyList.findIndex(
					(value) => String(value.id) === String(currencyId)
				)
				return coinIndex !== -1 ? this.currencyList[coinIndex].symbol : ''
			},
			/**
			 * 切换标签回调
			 */
			changeTabs(item) {
				this.currentIndex = item.index
				this.listForm.pageNum = 1
				this.listForm.labelId = item.id
				this._getRecruitmentList()
				console.log('切换标签回调', item);
			},

			/**
			 * 获取招聘标签列表
			 */
			async _queryLabelList() {
				const {
					success,
					result
				} = await queryLabelList({
					status: 1,
					isAsc: 'desc'
				})

				if (success) {
					result.rows.unshift(this.allLabelItem)
					const lang = uni.getLocale()
					result.rows.forEach((item) => {
						item.label = JSON.parse(item.label)
						if (lang == 'zh-Hans') {
							item.showLabel = item.label.cn
						} else if (lang == 'en') {
							item.showLabel = item.label.en
						} else {
							item.showLabel = item.label.ru
						}
					})

					this.labelList = result.rows
				}

			},
			getMainList() {
				this.listForm.pageNum = 1
				this._getRecruitmentList()
			},
			/**
			 * 获取招聘列表
			 */
			async _getRecruitmentList(val) {
				console.log(this.listForm);
				this.loading = true
				if (val !== 'Refresh') {
					uni.showLoading()
				}
				const {
					success,
					result
				} = await recruitmentList(this.listForm)
				// this.loading = false
				if (val !== 'Refresh') {
					uni.hideLoading()
				} else {
					uni.stopPullDownRefresh();
				}

				this.listForm.pageNum == 1 ?
					this.recruitList = result.rows :
					this.recruitList = [...this.recruitList, ...result.rows]
				this.total = result.total
			}
		},
	};
</script>

<style lang="scss" scoped>
	.omit_3 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		-webkit-line-clamp: 3;
		text-overflow: ellipsis;
	}

	.omit_1 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		-webkit-line-clamp: 1;
		text-overflow: ellipsis;
	}


	.icon-color {
		color: #61BDB2;
		font-size: 40upx;
	}

	.search-line {
		padding-top: calc(var(--status-bar-height) + 28rpx);
		display: flex;
		align-items: center;
		height: 44px;

		.search-block {
			margin-left: 26rpx;
			width: 100%;
			height: 76upx;
			background: #ffffff;
			border-radius: 38upx;
			box-sizing: border-box;
			padding: 30upx;
			display: flex;
			align-items: center;
			margin-right: 50upx;

			.search-icon {
				color: #878787;
				font-size: 30upx;
			}

			.search-input {
				flex: 1;
				margin-left: 30upx;
				font-size: 26upx;
				font-weight: 400;
				color: #212121;
				line-height: 1em;
			}
		}

		.zuo {
			color: #000000;
			font-size: 40upx;
			margin-right: 15upx;
		}
	}

	.contianer {
		box-sizing: border-box;
		padding: 0 30rpx 1rpx;

		.line {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30upx;

			.label {
				display: flex;
				align-items: center;
			}

			.item {
				padding: 12upx 20upx;
				background: #ffffff;
				border-radius: 10upx;
				margin-right: 20upx;
				font-size: 28upx;
				font-weight: 500;
				color: #878787;

				&.active {
					background: #61bdb2;
					color: #ffffff;
				}
			}

			.biao {
				color: #606665;
			}
		}
	}

	// 招聘列表
	.recent-module {

		.item-list {
			box-sizing: border-box;
			width: 690rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			padding: 20rpx;
			font-family: HarmonyOS Sans-Medium, HarmonyOS Sans;
			font-weight: 400;

			&__header {
				display: flex;
				align-items: center;

				.job-name {
					font-size: 32rpx;
					font-weight: 500;
					color: #000000;
					line-height: 48rpx;
				}

				.sub-job-name {
					font-size: 24rpx;
					color: #878787;
					margin-left: auto;
				}
			}

			&__center {
				margin-top: 10rpx;
				display: flex;
				align-items: center;

				.job-detail {
					.light-text {
						font-size: 24rpx;
						color: #878787;
						line-height: 36rpx;
					}

					.deep-text {
						font-size: 28rpx;
						color: #FE6600;
						line-height: 36rpx;
					}

					.light-text+.deep-text {
						margin-left: 6rpx;
					}

					.job-tags {
						flex-wrap: wrap;
						display: flex;


						&__item {
							margin-top: 10rpx;
							margin-right: 10rpx;
							background: #EBFAF8;
							border-radius: 8rpx;
							padding: 4rpx 8rpx;
							font-size: 20rpx;
							font-weight: 400;
							color: #61BDB2;
						}
					}
				}

				.job-btn {
					background: #61BDB2;
					border-radius: 10rpx;
					padding: 8rpx 20rpx;
					font-size: 28rpx;
					font-family: HarmonyOS Sans-Medium, HarmonyOS Sans;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 40rpx;
					margin-left: auto
				}

			}

			&__bottom {
				display: flex;
				align-items: center;
				margin-top: 14rpx;

				.job-info {
					.job-name {
						font-size: 24rpx;
						color: #000000;
						line-height: 36rpx;
						word-break: break-word;
						word-wrap: break-word;
					}

					.job-time {
						font-size: 24rpx;
						color: #878787;
						line-height: 36rpx;
					}
				}

				.job-tips {
					padding: 8rpx;
					box-sizing: border-box;
					background: rgba(254, 102, 0, 0.1);
					border-radius: 10rpx;
					margin-left: auto;
					font-size: 24rpx;
					color: #FE6600;
					line-height: 36rpx;
					white-space: nowrap;

					.job-icon {
						font-size: 32rpx;
						vertical-align: bottom;
						margin-right: 4rpx;
					}
				}
			}
		}
	}
</style>